window.addEventListener("load", function () {
	// ---------------------------分类标题---------------------------
	// 头部tab切换
	tab("header ul li", "active");
	// 返回顶部
	toTop("#toTop");
	const apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// 功能1：动态渲染api分类标题
	let html = "";
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class = "active" title = ${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class = "fbold" title = ${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li title = ${v.keyword}>${v.name}</li>`;
		}
	});
	$("#apiItem").innerHTML = html;
	// 功能2：给api分类标题增加点击后的激活样式
	$("#apiItem li").forEach(function (v) {
		v.addEventListener("click", function () {
			$("#apiItem li").forEach(function (item) {
				// console.log("item>>>>", item);
				item.classList.remove("active");
			});
			v.classList.add("active");
			// 功能3：点击api的分类标题，联动下方的搜索框
			$("#search strong").textContent = v.textContent;
			$("#search input").value = v.title;
		});
	});

	//API列表区域 模拟服务器返回的数据
	const listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报3", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报4", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	// 功能4：动态渲染卡片区内容
	// let cardHtml = "";
	// listDataArr.forEach(function (v) {
	// 	cardHtml += `
	// 	<li class="rel">
	// 		${v.isSpecial ? `<span class="abs font11">企业专用</span>` : ""}
	// 				<div class="abs tcenter">
	// 					<img src="../imgs/${v.img}" alt="图片已损坏" />
	// 					<p class="c6 font12">${v.name}</p>
	// 					<p class="font14 ${v.isSpecial ? "cff546b" : "c29c287"}">${v.price}</p>
	// 				</div>
	// 		<a href="#" class="abs tcenter cff font11">申请数据</a>
	// 	</li>`;
	// });
	// $("#contentList").innerHTML = cardHtml;
	// 翻页器的激活状态动态渲染
	console.log($("#pages ul li"));
	$("#pages ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			$("#pages ul li").forEach(function (item) {
				item.classList.remove("active");
			});
			// 点击翻页器渲染页面
			render(Number(v.textContent), 5, listDataArr);
		});
	});
	// 给下一页设置翻页效果

	//功能6： 分页功能函数封装
	function render(pagination, pagesiz, arr) {
		// 处理数据
		let startIndex = (pagination - 1) * pagesiz;
		let NawArr = arr.slice(startIndex, startIndex + pagesiz);
		let cardHtml = "";
		NawArr.forEach(function (v) {
			cardHtml += `
		<li class="rel">
			${v.isSpecial ? `<span class="abs font11">企业专用</span>` : ""}
					<div class="abs tcenter">
						<img src="../imgs/${v.img}" alt="图片已损坏" />
						<p class="c6 font12">${v.name}</p>
						<p class="font14 ${v.isSpecial ? "cff546b" : "c29c287"}">${v.price}</p>
					</div>
			<a href="" class="abs tcenter cff font11">申请数据</a>
		</li>`;
		});
		$("#contentList").innerHTML = cardHtml;
	}
	render(1, 5, listDataArr);

	// 功能一:点击a标签后后出现蒙层，使用事件委派
	$("#contentList").addEventListener("click", function (e) {
		if (e.target.localName === "a") {
			// 蒙层开启
			$("#mask").style.display = "block";

			// 禁用滚动条
			document.body.style.overflow = "hidden";
			// 阻止a标签默认跳转事件
			e.preventDefault();
		}
	});
	$("#mask").addEventListener("click", function () {
		// 关闭蒙层
		this.style.display = "none";
		// 开启滚动条
		document.body.style.overflow = "auto";
	});
	// 思考开启蒙层后取消滚动条
	// 阻止登录框的冒泡事件

	$("#loginModal form")[0].style.display = "block";
	$("#loginModal").addEventListener("click", function (e) {
		// e.shopPropagation();
		e.stopPropagation();
	});
	// 功能二：点击模态框中的Tab按钮，对应按钮要激活，并显示对应的form表单
	$("#loginModalLoginType a").forEach(function (v, i) {
		console.log(v);
		v.addEventListener("click", function () {
			$("#loginModalLoginType a").forEach(function (item, index) {
				item.classList.remove("active");
				$("#loginModal form")[index].style.display = "none";
			});
			v.classList.add("active");
			$("#loginModal form")[i].style.display = "block";
		});
	});
});
